<template>
  <el-collapse-transition>
    <div v-if="showPoor" class="component-poor-process">
      <transition-group name="list" tag="div" class="list-wrap" ref="loadingListRef">
        <div key="loading" v-if="loadingList.length === 0" class="process-item">
          <i class="costom-loading el-icon-loading" />
          <span class="process-content">基础数据准备加载中...</span>
        </div>
        <div v-for="item in loadingList" :key="'sortNo'+ item.sortNo" class="process-item" :class="stepStatus(item)">
          <i :class="stepIcon(item)" class="costom-loading" />
          <span class="process-content">{{ item.sortNo }}、{{ item.processName }}</span>
          <span v-show="loadingList[loadingList.length - 1].sortNo === item.sortNo">...</span>
          <!--<i v-if="item.sortNo == 1 && showCloseBtn" class="el-icon-circle-close close-btn" @click="showPoor=false" />-->
        </div>
        <div v-if="showCloseBtn" key="operate-btn" class="operate-btn">
          <el-button size="mini" type="primary" plain round @click="reloadPoor('condition')">条件加载</el-button>
          <el-button size="mini" type="success" plain round @click="reloadPoor('lastTime')">加载最近一次</el-button>
          <el-button size="mini" plain round @click="manualCancel">取消</el-button>
        </div>
      </transition-group>
      <!--<el-steps direction="vertical" :active="active" class="custom-steps" ref="loadingListRef">
          <el-step v-for="item in loadingList" :key="'sortNo'+ item.sortNo" :icon="stepIcon(item)" :status="stepStatus(item)">
            <span slot="title">{{ item.sortNo }}、{{ item.processName }}</span>
          </el-step>
        </el-steps>-->
    </div>
  </el-collapse-transition>
</template>

<script>
import { getProcessList } from '@/api/cqPe/peRecord'
let intervalFunId = null
const errorCode = ['GETPLANINFOSERRO', 'GETCOMPLEXERRO', 'GETKPINGOSERRO', 'GETKOAINFOSERRO', 'sysError']
export default {
  name: 'PoorProcess',
  data() {
    return {
      loadingList: '',
      showPoor: false,
      busCacheId: '',
      active: 0,
      lastLoading: false,
      showCloseBtn: false // 显示关闭按钮
    }
  },
  created() { // 初始化

  },
  beforeDestroy() {
    if (intervalFunId) {
      clearInterval(intervalFunId)
      intervalFunId = null
      this.lastLoading = false
      this.showCloseBtn = false
    }
  },
  mounted() {
  },
  methods: {
    onScroll() {
      this.$nextTick(() => {
        const e = this.$refs.loadingListRef?.$el // 获取的dom元素
        if (e) {
          e.scrollTop = e.scrollHeight - e.clientHeight
        }
      })
    },
    open(busCacheId) {
      this.showCloseBtn = false
      this.lastLoading = false
      if (intervalFunId) {
        clearInterval(intervalFunId)
        intervalFunId = null
      }
      this.busCacheId = busCacheId
      this.loadingList = []
      this.showPoor = true
      this.getListProcess()
      intervalFunId = setInterval(this.getListProcess, 1000)
    },
    /*
    *  出错重新加载
    * */
    reloadPoor(type) {
      this.$emit('onReloadType', type)
    },
    /*
    *  手动关闭加载进度
    * */
    manualCancel() {
      if (intervalFunId) {
        clearInterval(intervalFunId)
        intervalFunId = null
      }
      this.showPoor = false
      this.showCloseBtn = false
    },
    // 出错调用关闭加载进度
    close(error = false, sysErrMsg) {
      setTimeout(() => {
        clearInterval(intervalFunId)
        intervalFunId = null
      }, 1000)
      if (!error) {
        if (this.loadingList.some(item => errorCode.includes(item.processCode))) {
          this.showCloseBtn = true
        } else {
          setTimeout(() => {
            this.showPoor = false
          }, 3000)
        }
      } else {
        this.showCloseBtn = true
        this.loadingList.push({
          processCode: 'sysError', processName: sysErrMsg || '系统请求出错，请联系管理员。', sortNo: this.loadingList.length || 1
        })
      }
    },
    // 获取进度
    async getListProcess() {
      if (this.lastLoading) return
      let sysErrMsg = ''
      this.lastLoading = true
      const res = await getProcessList({busCacheId: this.busCacheId}).catch(err => {
        if (err instanceof Object && err.message) {
          sysErrMsg = err.message
        } else if (typeof err === 'string') {
          sysErrMsg = err
        }
        return false
      })
      this.lastLoading = false
      if (res === false) {
        this.close(true, sysErrMsg)
        return
      }
      let errorStatus = false
      if (this.loadingList.length === 0) {
        this.loadingList = res.data || []
      } else if (res.data && res.data instanceof Array) {
        res.data.forEach(item => {
          if (!this.loadingList.some(load => load.sortNo === item.sortNo)) {
            this.loadingList.push(item)
          }
          if (errorCode.includes(item.processCode)) {
            clearInterval(intervalFunId)
            intervalFunId = null
            errorStatus = true
          }
        })
      }
      this.onScroll()
      if (this.loadingList.length > 0) {
        if (this.loadingList[this.loadingList.length - 1].processCode === 'COMPLETE') {
          this.active = this.loadingList.length
          setTimeout(() => {
            clearInterval(intervalFunId)
            intervalFunId = null
          }, 1000)
          setTimeout(() => {
            if (!errorStatus) {
              this.showPoor = false
            } else {
              this.showCloseBtn = true
            }
          }, 3000)
        } else {
          this.active = this.loadingList.length - 1
        }
      }
    },
    stepIcon(item) {
      if (errorCode.includes(item.processCode)) {
        return 'el-icon-circle-close'
      }
      if (item.processCode === 'COMPLETE' || item.sortNo !== this.loadingList[this.loadingList.length - 1].sortNo) {
        return 'el-icon-circle-check'
      } else {
        return 'el-icon-loading'
      }
    },
    stepStatus(item) {
      if (errorCode.includes(item.processCode)) {
        return 'error'
      }
      if (item.processCode === 'COMPLETE' || item.sortNo !== this.loadingList[this.loadingList.length - 1].sortNo) {
        return 'process-loaded'
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  .component-poor-process {
    position: absolute;
    top: 30px;
    z-index: 10;
    height: calc(100% - 30px);
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    .close-btn {
      margin-left: 250px;
      color: #99a9bf;
      font-size: 20px;
      &:hover {
        color: #409EFF;
      }
    }
    .list-wrap {
      overflow-y: auto;
      height: 100%;
      min-width: 400px;
      overflow-x: hidden;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .process-item {
        height: 30px;
        color: #409EFF;
        .costom-loading {
          font-size: 20px;
        }
        .process-content {
          margin-left: 10px;
        }
      }
      .process-loaded {
        color: #67C23A;
      }
      .error {
        color: #F56C6C;
      }
      .operate-btn {
        margin-top: 6px;
      }
    }
    .custom-steps {
      overflow-y: auto;
      height: 100%;
      min-width: 400px;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
  }
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateX(50px);
  }
  .list-enter-active, .list-leave-active {
    transition: all 0.5s;
  }
  .list-move {
    transition: all 0.5s;
  }
</style>
